<template>
	<view class="tab">
		<text
			class="tab-item"
			v-for="(item, index) in options"
			:key="index"
			:class="{on: item.value == value}"
			@click="handleTouch(item)"
		>
			<text>{{ item.label }}</text>
		</text>
		
		<text class="tab-mask" :style="{left: maskLeft}"></text>
	</view>
</template>
<!-- 
	PS：为了激活移动层能覆盖激活文字，所以限制每项宽度固定
 -->
<script>
	export default {
		name:'tab',
		props:{
			value:[ String, Number ],
			options: {
				type: Array,
				default: ()=>[
					{ label: '最新', value: 'new' },
					{ label: '最热', value: 'hot' },
				]
			},
			
		},
		computed:{
			maskLeft(){
				let index = this.options.findIndex(e=>e.value==this.value);
				if(index==-1)return;
				return 120 * index + 'rpx'
			}
		},
		data(){
			return {
				
			}
		},
		methods:{
			handleTouch(item){
				if(item.value == this.vlaue) return;
				this.$emit('input', item.value);
				this.$emit('change', item.value);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab{
		background-color: #F4F6F5;
		border: 7rpx solid #F4F6F5;
		border-radius: 35rpx;
		height: 70rpx;
		box-sizing: border-box;
		display: inline-flex;
		align-items: center;
		position: relative;
		&>text{
			width:120rpx;
			border-radius: 30rpx;
			height: 100%;
		}
		.tab-item{
			font-size: 30rpx;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			position: relative;
			text{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate3d(-50%, -50%, 0);
				z-index:1;
			}
		}
		.tab-mask{
			position: absolute;
			background-color: #fff;
			left:0;
			transition: 0.2s;
			z-index:0;
		}
	}
</style>